<template>
  <div>
    <div id="search">
      <el-header>
        <p>查询</p>
        <el-form :inline="true"
                 :model="formInline"
                 class="demo-form-inline">
          <el-form-item label="搜索：">
            <el-input v-model="formInline.orderId"
                      placeholder="请输入要查询的订单号"
                      icon="el-icon-search"></el-input>
          </el-form-item>
          <el-form-item label="支付方式：">
            <el-select v-model="formInline.payWay"
                       placeholder="请选择支付方式">
              <el-option :key="i"
                         :label="v.pay_way"
                         :value="v.pay_way"
                         v-for='(v,i) in payWayData'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="onSubmit"
                       round>查询</el-button>
            <el-button type="primary"
                       @click="onReset"
                       round>重置</el-button>
          </el-form-item>
        </el-form>
      </el-header>
    </div>
    <div id="main">
      <el-table :data="tableData"
                style="width: 100%"
                stripe
                :cell-style="{border:'1px solid #DCDCDC'}"
                :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}">
        <el-table-column prop="order_id"
                         label="ID"
                         width="80"
                         align='center'></el-table-column>
        <el-table-column prop="order_num"
                         label="订单编号"
                         width="150"
                         align='center'></el-table-column>
        <el-table-column width="100"
                         prop="customer_name"
                         label="用户名"
                         align='center'></el-table-column>
        <el-table-column width="180"
                         prop="order_time"
                         label="用餐时间"
                         align='center'></el-table-column>
        <el-table-column width="120"
                         prop="customer_type"
                         label="用户类别"
                         align='center'></el-table-column>
        <el-table-column width="80"
                         prop="cash_money"
                         label="消费金额"
                         align='center'></el-table-column>
        <el-table-column width="120"
                         prop="pay_way"
                         label="支付方式"
                         align='center'></el-table-column>
        <el-table-column width="80"
                         prop="table_num"
                         label="就餐桌号"
                         align='center'></el-table-column>
        <el-table-column width="100"
                         prop="order_state"
                         label="状态"
                         align='center'></el-table-column>
        <el-table-column label="操作"
                         fixed='right'
                         align='center'>
          <template slot-scope="scope">

            <el-button type="text"
                       size="small"
                       @click="onCheck(scope.row)">订单详情</el-button>

            <el-button @click="onDel(scope.row)"
                       type="text"
                       size="small">删除</el-button>
            <el-button @click="onTran(scope.row)"
                       type="text"
                       size="small"
                       :style='scope.row.order_state=="已付款"?{display:"inline-block"}:{display:"none"}'>反位</el-button>
          </template>

        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-sizes="[5,10,15,20,25,30]"
                     :page-size="count"
                     layout="total,sizes,prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>


<script>
export default {
  data () {
    return {
      formInline: {
        orderId: '',
        payWay: ''
      },
      // 支付方式数据
      payWayData: [],
      serach: '',
      totalData: [],
      page: 1,
      count: 5,
      value: ''
    }
  },
  methods: {

    // 模糊查询
    onSubmit () {
      this.$axios({
        url: '/api/todayorder/getorderid',
        params: { data1: this.formInline, date2: this.value }
      }).then((res) => {
        this.totalData = res.data.data
        console.log(this.totalData);
        this.page = 1
      })
    },
    //下拉框数据渲染
    getPayway () {
      this.$axios({
        url: '/api/cashierwater/getpayway'
      }).then((res) => {
        this.payWayData = res.data.data
      })
    },

    //重置
    onReset () {
      this.formInline = {
        orderId: '',
        orderWay: ''
      }
      this.getuser();
    },


    // onSerach: function () {
    //   if (this.formInline.serach.trim()) {
    //     this.page = 1;
    //     this.serach = this.formInline.serach
    //   } else {
    //     this.serach = '';
    //   }
    // },

    onCheck () {
      this.$router.push('/employee/orderdetail')
    },
    // 删除
    onDel (data) {
      this.$alert('你确定要删除吗？', {
        title: '删除订单',
        callback: () => {
          this.$axios({
            url: '/api/todayorder/delhistoryorder',
            method: 'post',
            data: { order_id: data.order_id }
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getuser()
            this.page = 1
          })
        }
      });
    },
    // 反位
    onTran (data) {
      this.$alert('你确定要反位吗？', {
        title: '修改支付状态',
        callback: () => {
          this.$axios({
            url: '/api/todayorder/updatehistoryorderstate',
            method: 'post',
            data: { order_id: data.order_id }
          }).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getuser()
              this.page = 1
            }
          })
        }
      });
    },
    handleSizeChange: function (n) {
      this.count = n;
    },
    // 当前页
    handleCurrentChange: function (n) {
      this.page = n;
    },
    //查找出订单
    getuser: function () {
      this.$axios({
        url: '/api/todayorder/gettodayorder',
        params: { date: this.value }
      }).then((res) => {
        this.totalData = res.data.data
        let centerData = [];
        this.totalData.forEach((v, i) => {
          if (v.order_del_state) {
            centerData.push(v)
          }
        })
        this.totalData = centerData
      })
    },
    //页数变化


  },
  created: function () {
    var aData = new Date();
    var month = aData.getMonth() < 9 ? "0" + (aData.getMonth() + 1) : aData.getMonth() + 1;
    var date = aData.getDate() <= 9 ? "0" + aData.getDate() : aData.getDate();
    this.value = aData.getFullYear() + "-" + month + "-" + date;
    console.log(this.value)
    this.getuser();
    this.getPayway();
  },
  computed: {
    total: function () {
      if (this.serach) {
        let arr = this.totalData.filter((v) => {
          if (v.order_num.indexOf(this.serach) != -1) {
            return v;
          }
        })
        return arr.length;
      } else {
        return this.totalData.length;
      }
    },
    tableData: function () {
      if (this.serach) {
        let arr = this.totalData.filter((v) => {
          if (v.order_num.indexOf(this.serach) != -1) {
            return v;
          }
        })
        return arr.slice((this.page - 1) * this.count, this.page * this.count);
      } else {
        return this.totalData.slice((this.page - 1) * this.count, this.page * this.count);
      }
    }

  },

}
</script>


<style scoped lang='less'>
.el-header {
  border: 1px solid #dcdcdc;
  height: 100px !important;
  padding: 15px 30px;
  .el-form {
    margin-left: 50px;
    .el-form-item {
      margin-right: 60px;
      .el-button {
        width: 80px;
        height: 40px;
        margin-left: 0px;
        margin-right: 20px;
      }
      .el-input,
      .el-select {
        width: 260px;
      }
    }
  }
}

.table_btn {
  width: 52px;
}

.el-main {
  margin: 0px;
}
#main {
  margin-top: 15px;
  border: 1px solid #dcdcdc;
  padding: 18px 10px 20px 10px;
}
.cell {
  padding: 0px;
}
.el-table {
  margin-bottom: 50px;
}
.el-pagination {
  text-align: center;
}
</style>
